<template>
    <div>
        <cl-crud @load="onLoad">
            <template #slot-push>
                <el-button
                    type="primary"
                    size="mini"
                    :disabled="disabled"
                    @click="clickPush"
                    >一键推送消息</el-button>
            </template>
            <template #table-column-os="{ scope }">
                <el-tag size="small" v-if="scope.row.os === '0'">安卓</el-tag>
                <el-tag size="small" v-else-if="scope.row.os === '1'">苹果</el-tag>
                <el-tag size="small" v-else>其他</el-tag>
            </template>
            <!--添加移除标签-->
            <template #table-column-label="{ scope }">
                <template v-if="scope.row.labelList && scope.row.labelList.length > 0">
                    <el-tag
                            size="small"
                            style="margin: 4px"
                            @close="removeLabel(scope.row, index)"
                            v-for="(item, index) in scope.row.labelList"
                            :key="item"
                    >{{ item }}</el-tag
                    >
                </template>
                <span v-else>暂无标签</span>
            </template>
        </cl-crud>
        <cl-form ref="cl-form"></cl-form>
        <cl-form ref="cl-form-tag"></cl-form>
    </div>
</template>

<script>
	import platform from '@/mixin/platform';
	import moment from 'moment';
	export default {
		name: 'msgResult',
        data() {
			return {
				crud: null,
				options: {
					label: []
				},
				selects: {},
				disabled: true
            }
        },
		mixins: [platform],
        activated() {
			if (this.$route.query.tagIds) {
				this.disabled = false;
				this.refresh({
					tagIds: this.$route.query.tagIds
				})
            } else {
				this.disabled = true;
				this.refresh({
					tagIds: 0
				})
            }
        },
        methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.msgList.user)
					.set('table', {
						columns: [
							{
								label: '序号',
								type: 'index',
								align: 'center',
								width: 60
							},
							{
								label: '用户名',
								prop: 'nickName',
								align: 'center',
								emptyText: '未注册'
							},
							{
								label: '手机号',
								prop: 'phone',
								align: 'center',
								emptyText: '未绑定'
							},
							{
								label: '设备标识',
								prop: 'cid',
								align: 'center'
							},
							{
								label: '平台',
								prop: 'os',
								align: 'center'
							},
							{
								label: '渠道',
								prop: 'channel',
								align: 'center'
							},
							{
								label: '关联标签',
								prop: 'label',
								align: 'center'
							},
							{
								label: '创建时间',
								prop: 'createTime',
								align: 'center'
							}
						],

						op: {
							layout: ['']
						}
					})
					.set('layout', [
						[
							'refresh-btn',
							'slot-push',
							'query',
							'flex1',
							'search-key'
						],
						['data-table'],
						['flex1', 'pagination']
					])
					.on('refresh', async (params, { next, render }) => {
						let { list } = await next(params);
						list.map(e => {
							e.labelList = e.label ? e.label.split(',') : [];
						});

						render(list);
					})
					.done();
				app.refresh({
					tagIds: this.$route.query.tagIds
                });
			},
			refresh(params) {
				this.crud.refresh(params);
			},
			async clickPush() {
				const that = this;
				const list = await that.$service.msgList.tagList.list();
				let selectTag = [];
				let tagList = [];

				let tagName = this.$route.query.tagName;
				selectTag = tagName.split(',');

				list.map(i => {
					tagList.push(i.tagName);
				});
				let app = that.$refs['cl-form'].open({
					props: {
						title: '消息设置',
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: 'LOGO',
							prop: 'icon',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							label: '标题',
							prop: 'title',
							span: 15,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: true,
								message: '请输入标题'
							}
						},
						{
							label: '活动类型',
							prop: 'type',
							span: 8,
							value: 2,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: [
									{
										label: '标签消息',
										value: 2
									},
								],
								on: {
									change(val) {
										if (val === 2) {
											app.hiddenItem('label', false);
										} else {
											app.hiddenItem('label', true);
										}
									}
								}
							},
							rules: {
								required: true,
								message: '任务类型不能为空'
							}
						},
						{
							label: '内容',
							prop: 'content',
							span: 24,
							component: {
								name: 'el-input-content',
								data() {
									return {
										value2: '',
									};
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								props: {
									value: [String, Number]
								},
								methods: {
									Click(val) {
										this.value2 += val.target.dataset.val;
									},
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<div>
										<el-input
									rows={8}
									type="textarea"
									onInput={this.input}
									v-model={this.value2}></el-input>
										</div>
								);
								}
							},
							rules: {
								required: true,
								message: '请输入内容'
							}
						},
						{
							label: '跳转链接',
							prop: 'jumpUrl',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入跳转链接'
								}
							}
						},
						{
							label: '是否前端显示',
							prop: 'isDisplay',
							value: true,
							span: 24,
							component: {
								name: 'el-switch'
							},
							rules: {
								required: true,
								message: '请选择是否前端显示'
							}
						},
						{
							prop: 'tinyint',
							label: '推送时间',
							span: 12,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label: '立即推送',
										value: 1
									},
									{
										label: '预设时间',
										value: 0
									},
									{
										label: '每日推送',
										value: 2
									}
								]
							},
							rules: [
								{
									validator: (rules, value, callback) => {
										if (value == 0) {
											app.hiddenItem('pushTime', false);
										} else {
											app.hiddenItem('pushTime', true);
										}
										if (value == 2) {
											app.hiddenItem('cron', false);
										} else {
											app.hiddenItem('cron', true);
										}
										callback();
									}
								}
							]
						},
						{
							hidden: false,
							label: '推送标签',
							prop: 'label',
							span: 12,
							value: selectTag,
							component: {
								name: 'slot-select-tag',
								data() {
									return {
										selectLabel: []
									};
								},
								attrs: {
									list: tagList
								},
								props: {
									value: [Array],
									list: [Array]
								},
								mounted() {
									this.selectLabel = this.value;
								},
								methods: {
									change(val) {
										this.$emit('input', val);
									},
									createLabel() {
										that.$refs['cl-form-tag'].open({
											props: {
												title: '创建标签',
												labelWidth: '120px',
												center: true,
												'custom-class': 'custom-class-dialog-mini'
											},
											items: [
												{
													label: '标签名',
													prop: 'tagName',
													span: 15,
													component: {
														name: 'el-input',
														attrs: {
															placeholder: '标签名'
														}
													},
													rules: {
														required: true,
														message: '标签名'
													}
												}
											],
											on: {
												submit: ({ data, close }) => {
													this.list.push(data.tagName);
													close();
												}
											}
										});
									}
								},
								render() {
									return (
										<div>
										<el-select
									v-model={this.selectLabel}
									multiple
									size="small"
									onChange={this.change}
									placeholder="请选择标签">
										{tagList.map(item => {
												return (
													<el-option
												label={item}
												value={item}></el-option>
											);
											})}
										</el-select>
										</div>
								);
								}
							},
							rules: {
								required: true,
								message: '推送标签不能为空'
							}
						},
						{
							prop: 'pushTime',
							label: '预设时间',
							span: 12,
							hidden: true,
							value: moment().format('YYYY-MM-DD HH:mm:ss'),
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									validator: (rules, value, callback) => {
										const h = app.getData('upsert.form.hour') || 0;
										if (
											moment(value)
												.add(h, 'hour')
												.isBefore(moment())
										) {
											callback(new Error('推送时间不能小于当前时间'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'cron',
							label: '推送时间',
							span: 11,
							hidden: true,
							value: moment().format('HH:mm:ss'),
							component: {
								name: 'el-time-picker',
								props: {
									'value-format': 'HH:mm:ss'
								}
							},
							rules: {
								required: true,
								message: '推送时间'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 23,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					],
					on: {
						submit: ({ data, close, done }) => {
							let params = data;
							let idsArr = [];
							// 根据标签名去查询id
							list.forEach(listItem => {
								params.label.forEach(labelItem => {
									if (listItem.tagName === labelItem) {
										idsArr.push(listItem.id);
									}
								})
							});
							params.ids = idsArr.join(',');
							params.label = params.label.join(',');
							if (data.type !== 2) {
								data.label = undefined;
							}
							if (!data.isDisplay) {
								data.isDisplay = 0;
							} else {
								data.isDisplay = 1;
							}
							this.$service.msgList.tagList
								.pushMessage({
									...data,
								})
								.then(() => {
									this.$message.success('创建成功');
									close();
								})
								.catch(err => {
									this.$message.error(err);
									done();
								});
						}
					}
				});
			}
        }
	};
</script>

<style lang="scss" scoped>

</style>